<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import logisticCompany from '@/views/logistics/logisticsCompany/index.vue'
import logisticsPrice from '@/views/logistics/logisticsPrice/index.vue'

const activeName = ref('company')
const route = useRoute()

// 监听路由变化，根据查询参数设置默认标签页
watch(() => route.query.tab, (newTab) => {
  if (newTab) {
    activeName.value = newTab
  } else {
    activeName.value = 'company'
  }
}, { immediate: true })

const handleTabChange = (name) => {
  // 可以在这里添加切换标签页时的逻辑
  console.log('切换到标签页:', name)
}
</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleTabChange">
    <el-tab-pane label="物流公司" name="company">
      <logisticCompany />
    </el-tab-pane>
    <el-tab-pane label="物流价格" name="price">
      <logisticsPrice />
    </el-tab-pane>
  </el-tabs>
</template>

<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>